<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
</head>
<body>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap/css/default.css">

<!-- Custom styles for this template -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/dashboard.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/adminnav.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap/css/style.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.js"></script>
<script src="${pageContext.request.contextPath}/static/js/functions.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="${pageContext.request.contextPath}/static/css/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/css/bootstrap/js/prettify.min.js"></script>
<script src="${pageContext.request.contextPath}/static/css/bootstrap/js/multiselect.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        // make code pretty
        window.prettyPrint && prettyPrint();

        if (window.location.hash) {
            scrollTo(window.location.hash);
        }

        $('.nav').on('click', 'a', function (e) {
            scrollTo($(this).attr('href'));
        });

        $('#undo_redo').multiselect({
            keepRenderingSort: true
        });

        $('#undo_redo').multiselect();
        $('#undo_redo2').multiselect();
    });

    function scrollTo(id) {
        if ($(id).length) {
            $('html,body').animate({scrollTop: $(id).offset().top - 40}, 'slow');
        }
    }

    function check() {
        if ($("select[name='ids']").children().size() == 0) {
            showMsgModal("提示", "请选择商品尺寸");
            return false;
        }
        else {
            $("select[name='ids']").children().attr("selected", "selected");
        }
    }

    function check2() {
        if ($("select[name='ids']").children().size() == 0) {
            showMsgModal("提示", "请选择商品颜色");
            return false;
        }
    }
</script>

<c:import url="../common/adminTopNav.jsp"/>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">

            <c:import url="../common/adminLeftNav.jsp"/>

        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <%--content--%>
            <c:if test="${not empty sizeList or param.type==1}">
                <h2 style="display: inline">商品尺寸管理</h2>
            </c:if>
            <c:if test="${not empty sizeList or param.type==1}">
                <h3 style="display: inline;margin-left: 13cm">
                <a href="${pageContext.request.contextPath}/size/toOperateSizePage?pid=${param.pid}&type=2"
                >管理商品颜色</a>
                </h3>
            </c:if>

            <c:if test="${not empty colorList or param.type==2}">
                <h2 style="display: inline">商品颜色管理</h2>
            </c:if>
            <c:if test="${not empty colorList or param.type==2}">
                <h3 style="display: inline;margin-left: 13cm">
                    <a href="${pageContext.request.contextPath}/size/toOperateSizePage?pid=${param.pid}&type=1"
                    >管理商品尺寸</a>
                </h3>
            </c:if>

            <div class="col-sm-12  col-md-12 ">
                <p>商品${not empty sizes or param.type==1?"尺码":"颜色"}信息：
                    <%--商品包含的所有尺码--%>
                    <c:if test="${not empty sizes or param.type==1}">
                        <c:forEach items="${sizes}" var="size">
                            ${size.sizeName}
                        </c:forEach>
                    </c:if>
                    <c:if test="${not empty colors or param.type==2}">
                        <c:forEach items="${colors}" var="color">
                            ${color.colorName}
                        </c:forEach>
                    </c:if>
                </p>

                <form class="form" role="form" method="post" onsubmit="return check()"
                      action="${pageContext.request.contextPath}/size/operateSizeOrColor">
                    <input type="hidden" name="pid" value="${param.pid}"/>
                    <input type="hidden" name="type" value="${param.type}"/>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-xs-5">
                                <select name="from" id="undo_redo" class="form-control" size="15" multiple="multiple">
                                    <%--所有尺码--%>
                                    <c:if test="${not empty sizes or param.type==1}">
                                        <c:forEach items="${sizeList}" var="size">
                                            <option value="${size.sizeId}">${size.sizeName}</option>
                                        </c:forEach>
                                    </c:if>
                                    <c:if test="${not empty colors or param.type==2}">
                                        <c:forEach items="${colorList}" var="color">
                                            <option value="${color.colorId}">${color.colorName}</option>
                                        </c:forEach>
                                    </c:if>
                                </select>
                            </div>

                            <div class="col-xs-2">
                                <button type="button" id="undo_redo_undo" class="btn btn-primary btn-block">undo
                                </button>
                                <button type="button" id="undo_redo_rightAll" class="btn btn-default btn-block"><i
                                        class="glyphicon glyphicon-forward"></i></button>
                                <button type="button" id="undo_redo_rightSelected" class="btn btn-default btn-block"><i
                                        class="glyphicon glyphicon-chevron-right"></i></button>
                                <button type="button" id="undo_redo_leftSelected" class="btn btn-default btn-block"><i
                                        class="glyphicon glyphicon-chevron-left"></i></button>
                                <button type="button" id="undo_redo_leftAll" class="btn btn-default btn-block"><i
                                        class="glyphicon glyphicon-backward"></i></button>
                                <button type="button" id="undo_redo_redo" class="btn btn-warning btn-block">redo
                                </button>
                            </div>


                            <div class="col-xs-5">
                                <select name="ids" id="undo_redo_to" class="form-control" size="15"
                                        multiple="multiple">
                                    <%--商品包含的所有尺码--%>
                                    <c:if test="${not empty sizes or param.type==1}">
                                        <c:forEach items="${sizes}" var="size">
                                            <option value="${size.sizeId}">${size.sizeName}</option>
                                        </c:forEach>
                                    </c:if>
                                    <c:if test="${not empty colors or param.type==2}">
                                        <c:forEach items="${colors}" var="color">
                                            <option value="${color.colorId}">${color.colorName}</option>
                                        </c:forEach>
                                    </c:if>

                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary" type="submit">提交商品尺寸更新</button>
                        <button class="btn btn-primary" id="back" type="button"
                                onclick="javascript:location.href='${pageContext.request.contextPath}/product/descPicsList?type=2'">
                            返回列表
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<c:import url="../common/adminFooter.jsp"/>

</body>
</html>